<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		
		<!-- 内容开始 -->
		<view class="add-box left clearfix">
			<button @click="openPay">发起支付</button>
		</view>
		<!-- 内容结束 -->
		
		<uni-pay ref="pay"></uni-pay>
	</view>
</template>

<style scoped>
	/* 保持原样式不变 */
	.add-null-image-box{width:100%;height:300px;line-height:300px;text-align: center;font-size:14px;color:#999;}
	.add-image-box{width:230px;height:150px;border:1px solid #eee;border-radius: 5px;margin:4px;cursor:pointer;overflow: hidden;}
	.add-select-content{width:96%;margin-left:2%;margin-top:20px;height:420px;overflow: auto;}
	.add-select-title label{float:right;margin-right:10px;cursor:pointer;}
	.add-select-title{width:calc(100% - 10px);padding-left:10px;line-height:35px;font-size:13px;color:#555;}
	.add-select-box{width:1000px;height:500px;background:#fff;border-radius: 10px;}
	.poster-box{width:300px;height:200px;border:1px solid #eee;border-radius: 5px;background:#f8f8f8;line-height:180px;text-align: center;}
	.form-quxiao-submit{width:100px;line-height:40px;height:40px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;}
	.form-submit{width:100px;line-height:40px;height:40px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;}
	.example {padding: 15px;background-color: #fff;}
	.segmented-control {margin-bottom: 15px;}
	.button-group {margin-top: 15px;display: flex;justify-content: space-around;}
	.form-item {display: flex;align-items: center;}
	.button {display: flex;align-items: center;height: 35px;margin-left: 10px;}
	.add-box{width:96%;margin-left:2%;margin-top:30px;min-height:400px;}
</style>

<script>


var db = uniCloud.database();
export default {
	name:"news-add",
	props:{
		id:{
			type:String
		},
		userinfo:{
			type:Object,
			title:'用户信息'
		}
	},
	data() {
		return {
			routes: [], // 初始化面包屑路由数据（避免v-for遍历空值）
			// 初始化支付相关变量（关键修复点）
			order_no: "",
			out_trade_no: "",
			description: "测试订单", // 定义支付描述
			type: "test", // 定义支付回调类型
			custom: { // 定义自定义数据
				a: "a",
				b: 1
			}
		};
	},
	mounted() {
		// 可以在这里初始化routes数据，例如：
		// this.routes = [{name: '首页', to: '/home'}, {name: '支付', to: '/pay'}]
	},
	methods:{
		// 发起支付
		openPay(){
			this.order_no = `test` + Date.now(); // 生成订单号
			this.out_trade_no = `${this.order_no}-1`; // 生成支付单号
			
			// 检查组件是否存在
			if (!this.$refs.pay) {
				console.error('uni-pay组件未找到，请检查ref是否正确');
				return;
			}
			
			// 检查open方法是否存在
			if (typeof this.$refs.pay.open !== 'function') {
				console.error('uni-pay组件没有open方法，请确认组件版本或方法名');
				return;
			}
			
			console.log('参数',this.custom);
			// 调用支付方法（参数已在data中初始化，避免undefined）
			this.$refs.pay.open({
				total_fee: 1, // 确保为数字类型
				order_no: this.order_no,
				out_trade_no: this.out_trade_no,
				description: this.description,
				type: this.type,
				custom: this.custom
			}).then(res => {
				console.log('支付调用成功', res);
			}).catch(err => {
				console.error('支付调用失败', err);
			});
		}
	}
}
</script>
